// components/TabBar/TabBar.tsx
import React from 'react';
import { useNavigate } from 'react-router-dom';
import './style.scss'; // 样式文件

interface TabBarProps {
  activeTab: 'home' | 'city';
}

const TabBar: React.FC<TabBarProps> = ({ activeTab }) => {
  const navigate = useNavigate();

  return (
    <div className="tab-bar">
      <div 
        className={`tab-item ${activeTab === 'home' ? 'active' : ''}`}
        onClick={() => navigate('/')}
      >
        <i className="icon-home"></i>
        <span>首页</span>
      </div>
      <div 
        className={`tab-item ${activeTab === 'city' ? 'active' : ''}`}
        onClick={() => navigate('/city-list')}
      >
        <i className="icon-city"></i>
        <span>城市列表</span>
      </div>
    </div>
  );
};

export default TabBar;